<template>
  <div id="hmain" class="h-main" @mousemove="mainMousemove($event)">
    <header :class="headerCls" @mouseleave="headerMouseleave" @mouseenter="headerMouseenter">
      <h-header :height="45" :current-user="'管理员--ABC'" :index="headerIndex"></h-header>
    </header>
    <div :class="'logo '+logoCls">
      <img src="sihua.png" alt="思华科技" />
    </div>
    <section :class="sectionCls">
      <router-view></router-view>
    </section>
  </div>
</template>

<script>
import hHeader from "./common/header.vue";
export default {
  name: "hMain",
  components: {
    hHeader
  },
  data() {
    return {
      isFull: false,
      headerCls: "",
      sectionCls: "",
      timer: null,
      logoCls: "",
      isScreen: false,
      headerIndex: 0
    };
  },
  watch: {
    $route(to) {
      let toPath = to.path.split("/")[1];
      console.log("toPath:",toPath);
      if (toPath === "screen") {
        this.isScreen = true;
        this.headerIndex = 0;
      } else {
        this.isScreen = false;
        this.headerIndex = 1;
      }
    }
  },
  mounted() {
    //this.fullScreen();
    // window.addEventListener("fullscreenchange", e => {
    //   this.isFull = !this.isFull;
    //   if (!this.isFull) {
    //     this.esc();
    //   }
    // });
    console.log(this.$router)
    this.timer = this.delayHideHeader();
  },
  methods: {
    mainMousemove(e) {
      let y = e.clientY;
      if (y <= 0) {
        this.headerCls = "show";
        this.sectionCls = "min";
        this.logoCls = "hide";
      }
    },
    headerMouseleave() {
      if (!this.timer) {
        this.timer = this.delayHideHeader();
      }
    },
    headerMouseenter() {
      if (this.timer) {
        clearTimeout(this.timer);
        this.timer = null;
      }
    },
    delayHideHeader() {
      return setTimeout(_ => {
        this.headerCls = "hide";
        this.sectionCls = "max";
        if (this.isScreen) {
          this.logoCls = "show";
        }
      }, 3000);
    },
    fullScreen() {
      const v = document.querySelector("#hmain");
      if (!this.isFull) {
        if (v.requestFullscreen) {
          v.requestFullscreen();
        } else if (v.webkitRequestFullscreen) {
          v.webkitRequestFullscreen();
        } else if (v.mozRequestFullScreen) {
          v.mozRequestFullScreen();
        } else if (v.msRequestFullscreen) {
          v.msRequestFullscreen();
        }
      } else {
        if (document.exitFullscreen) {
          document.exitFullscreen();
        } else if (document.webkitExitFullscreen) {
          document.webkitExitFullscreen();
        } else if (document.mozCancelFullScreen) {
          document.mozCancelFullScreen();
        } else if (document.msExitFullscreen) {
          document.msExitFullscreen();
        }
      }
    }
  }
};
</script>

<style lang="less">
.h-main {
  height: 100%;

  & > .logo {
    background: transparent;
    width: 100px;
    height: 35px;
    position: absolute;
    transform: translateX(-98px);
    z-index: 99;

    &.show {
      animation-name: logo-show;
      animation-duration: 300ms;
      animation-delay: 300ms;
      animation-fill-mode: forwards;
      animation-timing-function: linear;
    }

    &.hide {
      display: none;
    }
  }

  header {
    height: 45px;
    overflow: hidden;

    &.hide {
      animation-name: header-hide;
      animation-duration: 300ms;
      animation-fill-mode: forwards;
      animation-timing-function: linear;
    }

    &.show {
      animation-name: header-show;
      animation-duration: 300ms;
      animation-fill-mode: forwards;
      animation-timing-function: linear;
    }
  }

  section {
    width: 100%;
    height: calc(100% - 45px);
    position: relative;

    &.max {
      animation-name: section-max;
      animation-duration: 300ms;
      animation-fill-mode: forwards;
      animation-timing-function: linear;
    }

    &.min {
      animation-name: section-min;
      animation-duration: 300ms;
      animation-fill-mode: forwards;
      animation-timing-function: linear;
    }
  }

  @keyframes header-hide {
    from {
      height: 45px;
    }
    to {
      height: 0;
    }
  }

  @keyframes header-show {
    from {
      height: 0;
    }
    to {
      height: 45px;
    }
  }

  @keyframes section-max {
    from {
      height: calc(100% - 45px);
    }
    to {
      height: 100%;
    }
  }

  @keyframes section-min {
    from {
      height: 100%;
    }
    to {
      height: calc(100% - 45px);
    }
  }

  @keyframes logo-show {
    from {
      transform: translate(-98px, 0);
      display: block;
    }
    to {
      transform: translate(5px, 5px);
      display: block;
    }
  }
}
</style>